<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css" type="text/css">
    <title>ol-grid examples</title>
    <style>
      html, body {
        margin: 0;
        height: 100%;
      }
      .map {
        display: inline-block;
        height: 400px;
        width: 400px;
        border: 1px solid black;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>
    <script src="ol-grid.umd.js"></script>
  </head>
  <body>
    <script>
      function createMap(mapFn) {
        let mapDiv = document.createElement('div');
        mapDiv.className = "map";
        document.body.append(mapDiv);
        let map = new ol.Map({
          target: mapDiv,
          view: new ol.View({
            center: ol.proj.fromLonLat([0, 0]),
            zoom: 18
          })
        });
        mapFn.call(null, map);
      }

      createMap(map => {
        map.addInteraction(new olGrid());
      });

      createMap(map => {
        map.addInteraction(new olGrid({ originCoordinate: [0, 0] }));
        map.getView().setZoom(20);
      });

      createMap(map => {
        map.addInteraction(new olGrid({ originCoordinate: [5, 0] }));
        map.getView().setZoom(20);
      });

      createMap(map => {
        map.addInteraction(new olGrid({ originCoordinate: [5, 0], rotationAnchorCoordinate: [1, 1] }));
        map.getView().setZoom(20);
      });

      createMap(map => {
        map.addInteraction(new olGrid({ originCoordinate: [5, 0], rotationAnchorCoordinate: [1, 1], xGridSize: 5, yGridSize: 10, }));
        map.getView().setZoom(20);
      });

      createMap(map => {
        const grid = new olGrid({ originCoordinate: [0, 0], rotationAnchorCoordinate: [1, 1], xGridSize: 5, yGridSize: 10, });
        map.addInteraction(grid);
        map.getView().setZoom(20);

        setInterval(function() {
          grid.setActive(!grid.getActive());
        }, 5000);
      });

      createMap(map => {
        var xGridSize = 5;
        const grid = new olGrid({ originCoordinate: [0, 0], rotationAnchorCoordinate: [1, 1], xGridSize, yGridSize: 10, });
        map.addInteraction(grid);
        map.getView().setZoom(20);

        setInterval(function() {
          xGridSize = (xGridSize + 1) % 5;
          grid.setXGridSize(xGridSize);
        }, 1000);
      });

    </script>
  </body>
</html>
